<template>
  <view class="my-3">
    <wd-form :model="formData" ref="formRef">
      <template v-for="field in fields" :key="field.name">
        <wd-card v-if="field.fieldType === 'input'">
          <wd-cell :prop="field.name" :rules="field.rules" :vertical="true" custom-class="p-0! m-0!">
            <template #title>
              <wd-text type="primary" :text="field.label"></wd-text>
            </template>
            <wd-input
              :placeholder="field.placeholder"
              v-model="formData[field.name]"
              @validate="handleValidate(field.name, $event)"
            />
          </wd-cell>
        </wd-card>

        <wd-card v-if="field.fieldType === 'upload'">
          <wd-cell :prop="field.name" :rules="field.rules" :vertical="true" custom-class="p-0! m-0!">
            <template #title>
              <view>
                <view class="flex flex-justify-between">
                  <view>
                    <wd-popover use-content-slot placement="right-start">
                      <template #content>
                        <view class="w-400rpx">
                          <view>更改标题</view>
                          <wd-input v-model="field.label" placeholder="备注" />
                        </view>
                      </template>
                      <wd-text type="primary" :text="field.label"></wd-text>
                    </wd-popover>

                    <wd-icon name="warn-bold" color="red" size="27rpx" custom-class="ml-2" @click="goDetail"></wd-icon>

                    <wd-icon name="download" color="#f88146" size="27rpx" custom-class="ml-2"></wd-icon>
                  </view>
                  <view class="flex-1 px-4">
                    <wd-progress :percentage="45" hide-text />
                  </view>
                  <view>
                    <wd-icon name="file-copy" size="28rpx"></wd-icon>
                  </view>
                </view>
                <template v-if="field.iskai">
                  <wd-input label="风机数量" placeholder="输入风机数量"></wd-input>
                  <view class="flex flex-items-center">
                    <text class="mr-5 pl-4">同步开启</text>
                    <wd-switch size="17" />
                  </view>
                </template>
              </view>
            </template>
            <UploadFiles
              :accept="field.uploadConfig.accept"
              v-model="formData[field.name]"
              @validate="handleValidate(field.name, $event)"
            />
          </wd-cell>
        </wd-card>
        <wd-card v-if="field.fieldType === 'date'">
          <wd-cell :prop="field.name" :rules="field.rules" :vertical="true" custom-class="p-0! m-0!">
            <template #title>
              <wd-text type="primary" :text="field.label"></wd-text>
            </template>
            <wd-calendar
              v-model="formData[field.name]"
              :placeholder="field.placeholder"
              @validate="handleValidate(field.name, $event)"
            />
          </wd-cell>
        </wd-card>
        <wd-card v-if="field.fieldType === 'switch'">
          <wd-cell :prop="field.name" :rules="field.rules" :vertical="true" custom-class="p-0! m-0!">
            <template #title>
              <wd-text type="primary" :text="field.label"></wd-text>
            </template>
            <wd-switch v-model="formData[field.name]" @validate="handleValidate(field.name, $event)" />
          </wd-cell>
        </wd-card>
      </template>
      <view class="pb-3 px-2">
        <wd-button :block="true" @click="submit">暂存</wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import UploadFiles from './formItem/UploadFiles.vue'
import type { FormField } from './types'

const formRef = ref()
const props = defineProps<{
  fields: FormField[]
  initialValues?: Record<string, any>
}>()
const emit = defineEmits(['update:modelValue', 'submit'])
const formData = ref({ ...props.initialValues })
watch(
  () => props.initialValues,
  newVal => {
    formData.value = { ...newVal }
  },
  { deep: true }
)
const goDetail = () => {
  uni.navigateTo({ url: '/pages/ticket/detail3' })
}
const errors = ref<Record<string, string>>({})

const handleValidate = (name: string, isValid: boolean) => {
  errors.value[name] = isValid ? '' : '验证失败'
}

const submit = () => {
  emit('submit', { formRef, formData })
  uni.showToast({
    title: '暂存成功',
    icon: 'none'
  })
  // 提交逻辑
}
</script>
<style lang="scss" scoped></style>
